<script lang="ts" setup>
import { useRouter } from 'vue-router';


const router = useRouter()

function onClickLeft() {
    router.back()
}

function againClick() {
    router.push('/detail/detail')
}

function cancelClick() {
    router.push('/detail/cancel')
}
</script>

<template>
    <div class="box">
        <!-- 导航栏 -->
        <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="onClickLeft" />

        <!-- 订单号 -->
        <div class="one">
            <span class="s1">订单号</span>
            <span class="s2">G109373202</span>
            <span class="s3">待酒店确认</span>
        </div>

        <div class="location">
            <h1>君假酒店（千山城规站店）</h1>
            <div class="two">
                <span>入住: 3月5日</span>
                <span>共一晚</span>
                <span>离开: 3月6日</span>
            </div>
            <img src="../../assets/map.jpg" alt="">

            <van-cell title="珠海市香洲区前山街道123号" icon="location-o" />

        </div>

        <div class="info">
            <p>入住人: 郭文贵</p>
            <span>手机号: 18076589769</span>
        </div>

        <h2>发票信息</h2>
        <div class="bill">
            <span class="s1">发票明细</span>
            <span class="s2">订房费</span>
            <span class="s3">80元</span>
        </div>
        <div class="bill">
            <span class="s1">发票抬头</span>
            <span class="s2">珠海嘻嘻哈哈股份有限公司</span>
        </div>
        <div class="bill">
            <span class="s1">纳税人识别号</span>
            <span class="s2">12312312332</span>
        </div>
        <div class="bill">
            <span class="s1">配送信息</span>
            <span class="s2">张三三，李四</span>
            <span class="s3">18034454224 </span>
        </div>

        <div class="pay">
            <span class="s1">支付方式</span>
            <span class="s2">在线支付</span>
        </div>
        <hr>

        <div class="price">
            <span class="s1">房间费</span>
            <span class="s2">￥660.00</span>
        </div>

        <div class="reduce">
            <span class="s1">优惠</span>
            <span class="s2">-￥17.0</span>
        </div>

        <div class="pay2">
            <span class="s1">实付款:</span>
            <span class="s2">￥643.0</span>
        </div>

        <div class="date">
            <p>下单时间:2020-03-04 12:22:33</p>
        </div>

        <div class="click">
            <van-button class="btn1" plain type="primary" size="small" @click="cancelClick">取消订单</van-button>
            <van-button class="btn2" type="primary" size="small" @click="againClick">再次预定</van-button>
        </div>


    </div>
</template>
<style scoped lang="scss">
.box {
    height: 1000px;
    background-color: #f8f9fa;
    overflow: hidden;
    overflow: visible;
}

.location {
    width: 290px;
    height: 290px;
    background-color: white;
    margin-top: 10px;
    margin-left: 40px;
    overflow: hidden;
}

.location>h1 {
    font-size: 13px;
    margin-left: 66px;
    margin-top: 10px;
}

.one {
    width: 100%;
    height: 35px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
}

.one>.s1 {
    font-size: 15px;
    margin-top: 8px;
}

.one>.s2 {
    font-size: 15px;
    margin-top: 8px;
}

.one>.s3 {
    color: red;
    font-size: 15px;
    margin-top: 8px;
}

.two {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

img {
    width: 80%;
    height: 160px;
    margin-top: 10px;
    margin-left: 30px;
}

.info {
    width: 100%;
    height: 60px;
    background-color: white;
    overflow: hidden;
    margin-top: 5px;
}

.info>p {
    font-size: 13px;
    margin-left: 30px;
    margin-top: 8px;
}

.info>span {
    font-size: 13px;
    margin-left: 30px;
}

h2 {
    font-size: 15px;
    margin-left: 15px;
    margin-top: 5px;
}

.bill {
    width: 100%;
    height: 30px;
    background-color: white;
    overflow: hidden;
}

.bill>.s1 {
    font-size: 12px;
    margin-left: 13px;
}

.bill>.s2 {
    font-size: 12px;
    margin-left: 80px;
}

.bill>.s3 {
    font-size: 12px;
    margin-left: 50px;
}

.pay {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
}

.pay>.s1 {
    font-size: 15px;
    margin-top: 5px;

}

.pay>.s2 {
    font-size: 15px;
    margin-top: 5px;

}

.price {
    display: flex;
    overflow: hidden;
}

.price>.s1 {
    margin-top: 5px;
    float: left;
    margin-left: 40px;
}

.price>.s2 {
    margin-top: 5px;
    margin-left: 210px;
}

.reduce {
    display: flex;
    overflow: hidden;
}

.reduce>.s1 {
    float: left;
    margin-left: 40px;
    margin-top: 5px;
}

.reduce>.s2 {
    margin-left: 225px;
    color: red;
    margin-top: 5px;
}

.pay2 {
    overflow: hidden;
    margin-top: 10px;
}

.pay2>.s1 {
    font-size: 13px;
    margin-left: 240px;
}

.pay2>.s2 {
    font-size: 13px;
    margin-left: 10px;
    color: red;
}

.date {
    overflow: hidden;
    margin-top: 5px;
}

.date>p {
    font-size: 12px;
    margin-left: 180px;
}

.click {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}
</style>